<template>
	<div class="order_view">
		<h1 class="title">
			<div @click="$router.go(-1)" class="back">
				<van-image width="18" height="18" src="/img/login/left.png" alt="left" />
			</div>
			<span class="span">订单列表</span>
			<router-link tag="div" to="/shoppingCar" class="search_compile">
				<van-image width="20" height="20" src="/img/order/shoppingCar.png" alt="shoppingCar" />
			</router-link>
		</h1>
		<!-- 订单分类 -->
		<van-tabs v-model="active">
			<van-tab title="待付款">
				<div class="all_box">
					<ul v-if="orderData.incomplete" class="all">
						<li>
							<h1 class="titile_h1">未付款</h1>
							<div class="business">
								<van-image width="12" height="12" src="/img/order/business.png" alt="business" />
								<span class="titile_span">{{ orderData.incomplete?.shop }}</span>
								<van-image width="8" height="8" src="/img/my/right.png" alt="right" />
							</div>
							<div class="information">
								<van-image width="60" height="60" :src="orderData.incomplete?.image?.image" alt="img" />
								<div class="font">
									<h1 class="font_h1">{{ orderData.incomplete?.title }}</h1>
									<span class="font_span">颜色：{{ orderData.incomplete?.chooseDetailArr?.color }}；</span>
								</div>
								<div class="price_box">
									<p class="price">
										￥<span v-if="orderData.incomplete?.price">{{ orderData.incomplete?.price?.substring(1) }}</span>
									</p>
									<p class="num">
										x<span>{{ orderData.incomplete?.num }}</span>
									</p>
								</div>
							</div>
							<div class="amount_to">
								包邮，总计：￥<span class="amount_to_span">{{
									parseFloat(orderData.incomplete?.price.substring(1)) * orderData.incomplete?.num
								}}</span>
							</div>
							<div @click="goPay" class="pay_money">
								<button class="payment" @click="showPopup">付款</button>
							</div>
						</li>
					</ul>
					<div class="loadding" v-if="!orderData.incomplete">
						<van-image width="257" height="129" src="/img/order/loadding.png" alt="loadding" />
						<p class="loadding_p">还没有相关订单哦</p>
					</div>
				</div>
			</van-tab>
			<van-tab title="已付款">
				<div class="all_box">
					<ul v-if="orderData.success" class="all">
						<li v-for="(item,index) in orderData.success" :key="index">
							<h1 class="titile_h1">已付款</h1>
							<div class="business">
								<van-image width="12" height="12" src="/img/order/business.png" alt="business" />
								<span class="titile_span">{{ item.goodsArr[0]?.goods[0]?.shop}}</span>
								<van-image width="8" height="8" src="/img/my/right.png" alt="right" />
							</div>
							<div class="information">
								<van-image width="60" height="60" :src="item.goodsArr[0]?.goods[0]?.image?.image" alt="img" />
								<div class="font">
									<h1 class="font_h1">{{ item.goodsArr[0]?.goods[0]?.title }}</h1>
									<span class="font_span">颜色：{{ item.goodsArr[0]?.goods[0]?.chooseDetailArr?.color }}；</span>
								</div>
								<div class="price_box">
									<p class="price">
										￥<span v-if="item.goodsArr[0]?.goods[0]?.price">{{ item.goodsArr[0]?.goods[0]?.price?.substring(1) }}</span>
									</p>
									<p class="num">
										x<span>{{ item.goodsArr[0]?.goods[0]?.num }}</span>
									</p>
								</div>
							</div>
							<div class="amount_to">
								包邮，总计：￥<span class="amount_to_span">{{
									parseFloat(item.goodsArr[0]?.goods[0]?.price.substring(1)) * item.goodsArr[0]?.goods[0]?.num
								}}</span>
							</div>
						</li>
					</ul>
					<div class="loadding" v-if="!orderData.success">
						<van-image width="257" height="129" src="/img/order/loadding.png" alt="loadding" />
						<p class="loadding_p">还没有相关订单哦</p>
					</div>
				</div>
			</van-tab>
			<van-tab title="待收货">
				<div class="all_box">
					<ul class="all" v-if="false">
						<li>
							<h1 class="titile_h1">未付款</h1>
							<div class="business">
								<van-image width="12" height="12" src="/img/order/business.png" alt="business" />
								<span class="titile_span">暖心物语旗舰店</span>
								<van-image width="8" height="8" src="/img/my/right.png" alt="right" />
							</div>
							<div class="information">
								<van-image
									width="60"
									height="60"
									src="https://s5.mogucdn.com/mlcdn/c45406/211018_08482d49d6d94g50a4dhg4ij3gl88_800x800.jpg_120x120.webp"
									alt="img"
								/>
								<div class="font">
									<h1 class="font_h1">耳罩保暖女冬可爱耳套女生冬季韩版可爱耳包耳暖护耳朵神器耳捂子</h1>
									<span class="font_span">颜色：白色；</span>
								</div>
								<div class="price_box">
									<p class="price">￥<span>123</span></p>
									<p class="num">x<span>123</span></p>
								</div>
							</div>
							<div class="amount_to">包邮，总计：￥<span class="amount_to_span">23:00</span></div>
							<div class="pay_money">
								<button class="payment">付款</button>
							</div>
						</li>
					</ul>
					<div class="loadding">
						<van-image width="257" height="129" src="/img/order/loadding.png" alt="loadding" />
						<p class="loadding_p">还没有相关订单哦</p>
					</div>
				</div></van-tab
			>
			<van-tab title="待评价">
				<div class="all_box">
					<ul class="all" v-if="false">
						<li>
							<h1 class="titile_h1">未付款</h1>
							<div class="business">
								<van-image width="12" height="12" src="/img/order/business.png" alt="business" />
								<span class="titile_span">暖心物语旗舰店</span>
								<van-image width="8" height="8" src="/img/my/right.png" alt="right" />
							</div>
							<div class="information">
								<van-image
									width="60"
									height="60"
									src="https://s5.mogucdn.com/mlcdn/c45406/211018_08482d49d6d94g50a4dhg4ij3gl88_800x800.jpg_120x120.webp"
									alt="img"
								/>
								<div class="font">
									<h1 class="font_h1">耳罩保暖女冬可爱耳套女生冬季韩版可爱耳包耳暖护耳朵神器耳捂子</h1>
									<span class="font_span">颜色：白色；</span>
								</div>
								<div class="price_box">
									<p class="price">￥<span>123</span></p>
									<p class="num">x<span>123</span></p>
								</div>
							</div>
							<div class="amount_to">包邮，总计：￥<span class="amount_to_span">23:00</span></div>
							<div class="pay_money">
								<button class="payment">付款</button>
							</div>
						</li>
					</ul>
					<div class="loadding">
						<van-image width="257" height="129" src="/img/order/loadding.png" alt="loadding" />
						<p class="loadding_p">还没有相关订单哦</p>
					</div>
				</div></van-tab
			>
			<van-tab title="售后">
				<div class="all_box">
					<ul class="all" v-if="false">
						<li>
							<h1 class="titile_h1">未付款</h1>
							<div class="business">
								<van-image width="12" height="12" src="/img/order/business.png" alt="business" />
								<span class="titile_span">暖心物语旗舰店</span>
								<van-image width="8" height="8" src="/img/my/right.png" alt="right" />
							</div>
							<div class="information">
								<van-image
									width="60"
									height="60"
									src="https://s5.mogucdn.com/mlcdn/c45406/211018_08482d49d6d94g50a4dhg4ij3gl88_800x800.jpg_120x120.webp"
									alt="img"
								/>
								<div class="font">
									<h1 class="font_h1">耳罩保暖女冬可爱耳套女生冬季韩版可爱耳包耳暖护耳朵神器耳捂子</h1>
									<span class="font_span">颜色：白色；</span>
								</div>
								<div class="price_box">
									<p class="price">￥<span>123</span></p>
									<p class="num">x<span>123</span></p>
								</div>
							</div>
							<div class="amount_to">包邮，总计：￥<span class="amount_to_span">23:00</span></div>
							<div class="pay_money">
								<button class="payment">付款</button>
							</div>
						</li>
					</ul>
					<div class="loadding">
						<van-image width="257" height="129" src="/img/order/loadding.png" alt="loadding" />
						<p class="loadding_p">还没有相关订单哦</p>
					</div>
				</div></van-tab
			>
		</van-tabs>
	</div>
</template>

<script>
// import {mapState} from "vuex";

export default {
	data() {
		return {
			//付款栏
			show: false,
			active: 0,
			orderData: [],
		};
	},

	mounted() {
		this.orderData = {
			//已完成的订单
			incomplete: this.getLocalStroge("order")?.goodsArr[0].goods[0],
			//未完成的订单
			success: this.getLocalStroge("success"),
		};
	},

	methods: {
		//付款栏显示
		showPopup() {
			this.show = true;
		},
		goPay() {
			console.log("gopay");

			this.$router.push({name: "order-detail", query: {goodsArr: JSON.stringify(this.getLocalStroge("order"))}});
		},
	},
};
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.order_view {
	background-color: #f6f6f6;
	padding-bottom: 20px;
}
.title {
	position: relative;
	display: flex;
	font-weight: normal;
	font-size: 18px;
	color: #5e5e5e;
	align-items: center;
	border-bottom: 1px solid #c9c7c8;
	background-color: #fafafa;
	.back {
		width: 45px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 18px;
		color: #7d6363;
	}
	.span {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.search_compile {
		display: flex;
		align-items: center;
		position: absolute;
		right: 8px;
		span {
			font-size: 13px;
			color: #727272;
			display: inline-block;
			margin-right: 8px;
		}
	}
}
.all {
	margin: 9px;
	margin-bottom: 0;
	li {
		padding: 15px;
		padding-top: 0;
		background-color: #fff;
		border-radius: 5px;
		.titile_h1 {
			font-weight: 700;
			font-size: 16px;
			color: #333333;
			height: 50px;
			line-height: 50px;
		}
		.business {
			display: flex;
			font-size: 12px;
			color: #666;
			align-items: center;
			margin-bottom: 15px;
		}
		.titile_span {
			display: inline-block;
			margin-left: 4px;
			margin-right: 4px;
		}
		.information {
			display: flex;
			padding-bottom: 18px;
			border-bottom: 1px solid #f5f5f5;
			margin-bottom: 15px;
		}
		.font {
			width: 51.4%;
			padding-left: 12px;
		}
		.font_h1 {
			font-size: 12px;
			color: #333;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2; /*设置隐藏行数*/
			-webkit-box-orient: vertical;
		}
		.font_span {
			font-size: 12px;
			color: #999;
		}
		.price_box {
			width: 26%;
		}
		.price {
			width: 100%;
			text-align: right;
			font-size: 14px;
			color: #333;
		}
		.num {
			font-size: 12px;
			color: #999;
			text-align: right;
		}
		.amount_to {
			font-size: 12px;
			color: #333;
			text-align: right;
		}
		.amount_to_span {
			font-size: 18px;
			font-weight: 700;
		}
		.pay_money {
			margin-top: 12px;
			text-align: right;
		}
		.payment {
			width: 76px;
			height: 28px;
			border-radius: 3px;
			background-color: #ff4466;
			color: #fff;
			font-size: 12px;
			border: none;
		}
	}
}
.loadding {
	height: 293px;
	margin: 10px 0;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.loadding_p {
		font-size: 16px;
		color: #666;
		margin-top: 15px;
	}
}
.title_box {
	position: relative;
	display: flex;
	font-weight: normal;
	font-size: 18px;
	color: #5e5e5e;
	align-items: center;
	border-bottom: 1px solid #e5e5e5;
	.back {
		width: 45px;
		height: 48px;
		line-height: 48px;
		text-align: center;
		font-size: 28px;
		color: #82635e;
		font-weight: normal;
	}
	span {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}
.cashier {
	padding: 0 15px;
	li {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		a {
			font-size: 15px;
			color: #333;
		}
		.payment_method {
			font-size: 15px;
			color: #333;
			display: flex;
			align-items: center;
		}
		.payment_method_span {
			margin-right: 10px;
		}
	}
}

::v-deep .van-tab__text {
	font-size: 14px;
	color: #333;
	font-weight: 700;
}
::v-deep .van-tabs__line {
	width: 25px;
	height: 2px;
	bottom: 21px;
}
::v-deep .van-tabs__wrap {
	border-bottom: 1px solid #e5e5e5;
}
</style>
